<template>
	<view class="usersetuppassword">
    <statusBar></statusBar>
    <uni-nav-bar left-icon="back" title="修改密码"></uni-nav-bar>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="password">
    	<text>原密码：</text><input type="text" v-model="oldpwd" placeholder="请输入原密码" />
    </view>
    <view class="password">
    	<text>新密码：</text><input type="text" v-model="newPwd" placeholder="请输入新密码" />
    </view>
    <view class="password">
    	<text>确认密码：</text><input type="text" v-model="againNewPwd" placeholder="请再次输入新密码" />
    </view>
    <button @click="confirmPassword">确定</button>
    
    <uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>
	</view>
</template>

<script>
  import statusBar from "@/components/status-bar.vue"
  import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
    components: {
      uniPopup,
      statusBar
    },
		data() {
			return {
				type: '',
        oldpwd: '',
        newPwd: '',
        againNewPwd: '',
			};
		},
    methods: {
      confirmPassword: function(){
        if(this.newPwd == this.againNewPwd){
          uni.request({
            method: 'POST',
            header: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'Authorization': uni.getStorageSync('token')
            },
            url: this.apiUrl + 'api/student/personal/SubmitPwd', 
            data: {
              password: this.newPwd,
              oldPassword: this.oldpwd,
            },
            success: res => {
              console.log(res);
              if(res.data.state == 'success'){
                this.msg = '修改成功';
                this.togglePopup('middle');
                this.oldpwd = '';
                this.againNewPwd = '';
                this.newPwd = '';
              }else{
                this.msg = res.data.message;
                this.togglePopup('middle');
              }
            }
          });
        }else{
          this.msg = '二次新密码不一致';
          this.togglePopup('middle');
        }
      },
    }
	}
</script>

<style scoped>
  .line{
    height: 15upx;
  }
  .password{
    width: 700upx;
    height: 90upx;
    margin: 40upx auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .password text{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 180upx;
    font-size: 32upx;
  }
  .password input{
    display: flex;
    width: 495upx;
    height: 90upx;
    line-height: 90upx;
    background-color: #FFFFFF;
    padding-left: 25upx;
  }
  .password .input-placeholder{
    line-height: 90upx;
  }
  .usersetuppassword button{
    width: 700upx;
    height: 88upx;
    background-color: #27B28B;
    border: none;
    padding: 0;
    color: #FFFFFF;
  }
</style>
